{% extends "base.html" %} 

{% load i18n %} 
{% load staticfiles %}

{% block title %}微云{% endblock title %} 
{% block body %}
<nav class="navbar navbar-default navbar-padding">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">微云</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                {% if user.is_authenticated %}
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <img class="img-circle img-avatar" src="{% static 'images/default_avatar.png' %}"> {{ user.username }}
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;个人信息</a></li>
                        <li><a href="{% url 'member_wechart_menu' %}"><i class="fa fa-th-large" aria-hidden="true"></i>&nbsp;个人菜单</a></li>
                        <li><a href="#"><i class="fa fa-power-off" aria-hidden="true"></i>&nbsp;用户注销</a></li>
                    </ul>
                </li>
                {% else %}
                <li>
                    <a data-toggle="modal" data-target="#loginModel" href="javascript:void(0);;">登录</a>
                </li>
                <li>
                    <a data-toggle="modal" data-target="#registerModel" href="javascript:void(0);;">注册</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
<div class="index-carousel-wrap">
    <div id="carousel-example-generic" class="carousel slide index-carousel" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            {% for advertisement in advertisements %}
            <li data-target="#carousel-example-generic" data-slide-to="0" class="{% if forloop.counter == 1 %}active{% endif %}"></li>
            {% endfor %}
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            {% for advertisement in advertisements %}
                {% if advertisement.enable == True %}
                <div class="item {% if forloop.counter == 1 %}active{% endif %}">
                    <img class="index-carousel-image" src="/media/{{ advertisement.image }}" alt="{{ advertisement.name }}">
                    <div class="carousel-caption">
                        {{ advertisement.desc|safe }}
                    </div>
                </div>
                {% endif %}
            {% endfor %}
    
        </div>
    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<div id="loginModel" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-sm" role="document">
        <form id="loginForm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">登录</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row login-row">
                            <i class="fa fa-user login-tip-icon" aria-hidden="true"></i>
                            <input name="username" class="form-control login-input" type="text" placeholder="用户名/手机号码">
                        </div>
                        <div class="row login-row">
                            <i class="fa fa-key login-tip-icon" aria-hidden="true"></i>
                            <input id="lPassword" name="password" class="form-control login-input" type="password" placeholder="密码">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">登录</button>
                </div>
            </div>
        </form>
	</div>
</div>

<div id="registerModel" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <form id="registerForm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">注册</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row register-row">
                            <i class="fa fa-user register-tip-icon" aria-hidden="true"></i>
                            <input name="username"class="form-control register-input" type="text" placeholder="用户名">
                        </div>
                        <div class="row register-row">
                            <i class="fa fa-key register-tip-icon" aria-hidden="true"></i>
                            <input id="rPassword" name="password" class="form-control register-input" type="password" placeholder="密码">
                        </div>
                        <div class="row register-row">
                            <i class="fa fa-key register-tip-icon" aria-hidden="true"></i>
                            <input name="repassword" class="form-control register-input" type="password" placeholder="确认密码">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">注册</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock body %}